<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-button
      type="primary"
      icon="el-icon-plus"
      size="default"
      @click="showAdd"
      >添加</el-button
    >
    <!-- 品牌管理 -->
    <el-table border stripe style="margin: 20px" :data="trademark.records">
      <el-table-column type="index" label="序号" align="center" width="80" />
      <el-table-column label="品牌名称" align="center" prop="tmName" />
      <el-table-column label="品牌LOGO" align="center">
        <template v-slot:default="scope">
          <img :src="scope.row.logoUrl" style="width: 100px; height: 60px" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row, $index }">
          <div>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-edit"
              @click="updateTradeMark(row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="remove(row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      style="text-align: center"
      :page-sizes="[3, 6, 9]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      :title="form.id ? '修改品牌' : '添加品牌'"
      :visible.sync="isShowDialog"
    >
    <!-- :model="form"
        :rules="rules"
        ref="formName" -->
      <el-form
        :model="form"
        :rules="rules"
        ref=""
        style="width: 80%"
        label-width="100px"
      >
        <el-form-item label="品牌名称" prop="tmName">
          <el-input v-model="form.tmName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="logoUrl">
          <el-upload
            class="avatar-uploader"
            action="/dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过50kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  reqTrademarkList,
  reqUpdateAndAddData,
  reqDeleteTrademark,
} from "@/api/product/trademark/trademark";

export default {
  name: "trademark",
  data() {
    return {
      trademark: {}, //当前品牌列表
      total: 0, //总数量
      currentPage: 1, //当前页
      pageSize: 3, //每页数量
      Loading: false,
      isShowDialog: false, //控制对话框显示隐藏
      dialogVisible: false, //删除对话框显示隐藏
      form: {
        tmName: "",
        logoUrl: "",
      },
      rules: {
        tmName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        logoUrl: [
          {
            required: true,
            message: "LOGO必须指定",
          },
        ],
      },
    };
  },

  mounted() {
    this.getTrademarkList();
  },

  methods: {
    //
    handleSizeChange(page) {
      this.pageSize = page;
    },
    //改变展示几条数据
    handleCurrentChange(limit) {
      this.currentPage = limit;
      //从新获取请求
      this.getTrademarkList();
    },

    //添加按钮的回调
    showAdd() {
      this.form = {
        tmName: "",
        logoUrl: "",
      };
      this.isShowDialog = true;
    },

    //上传图片的回调函数
    handleAvatarSuccess(res, file) {
      this.form.logoUrl = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    //获取品牌数据的方法
    async getTrademarkList() {
      let result = await reqTrademarkList(this.currentPage, this.pageSize);
      this.trademark = result.data;
      this.currentPage = result.data.current;
      this.pageSize = result.data.size;
      this.total = result.data.total;
    },
    //确定按钮的回调
     addOrUpdate() {
      // console.log(this.$refs.formName);
      
      // this.$refs.formName.validate(async (valid) => {
      //   if (valid) {
      //     let result = await reqUpdateAndAddData(this.form);
      //     this.isShowDialog = false;
      //     // //从新获取请求
      //     this.getTrademarkList();
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    // 修改按钮的回调
    async updateTradeMark(row) {
      this.isShowDialog = true;
      this.form.tmName = row.tmName;
      this.form.id = row.id;
      this.form.logoUrl = row.logoUrl;
    },
    //删除按钮的回调
    remove(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let result = await reqDeleteTrademark(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getTrademarkList(this.currentPage);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>